<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
      <li>aaa</li>
      <li>bbb</li>
      <li>ccc</li>
      <li>ddd</li>
    </ul>
    <script type="text/javascript">
      var li = document.querySelector("li:nth-child(1)");
      const ul = document.querySelector("ul")
      li.style.backgroundColor="blue";
      document.addEventListener("keydown",function (event){
        if (event.keyCode==38){ //如果检测到键盘输入向上键
          li.style.backgroundColor=null;
          if(li==ul.firstElementChild){
            ul.lastElementChild.style.backgroundColor="blue";
            li = ul.lastElementChild;
          }else {
            li.previousElementSibling.style.backgroundColor="blue";
            li = li.previousElementSibling;
          }
        }
        else if (event.keyCode==40) { //如果检测到键盘输入向下键
          li.style.backgroundColor=null;
          if(li==ul.lastElementChild){
            ul.firstElementChild.style.backgroundColor="blue";
            li = ul.firstElementChild;
          }else {
            li.nextElementSibling.style.backgroundColor="blue";
            li = li.nextElementSibling;
          }
        }
        else {
          
        }
      });
    </script>
  </body>
</html>
